<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <title>Document</title>
    <style>
        .nav {
            width: 480px;
            display: flex;
            justify-content: space-between;
        }
        .nav p{
            width: 110px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: pink;
            color: #fff;
            border-radius: 50px;
            cursor: pointer;
        }
        .nav .act{
            background-color: deeppink;
            color: aquamarine;
            /* display: block; */
        }
        .navs .navs_1{
            width: 500px;
            height: 500px;
            text-align: center;
            color:crimson;
            background: darkorchid;
            font-size: 60px;
            line-height: 500px;
            margin-top: 30px;
            border-radius: 50px;
        }
        .navs .show{
            color: #fff;
            background-color:cornflowerblue;
        
        }
        .tade{
            animation: tada .8s;
        }
        .sd-enter-active{
            animation: zoomInDown 1.5s ;
        }
        .sd-leave-active{
            animation: zoomOutDown 1.2s;
        }
        
        /* .nvas_1{
            animation: backOutDown 1.5s;
        }
       */
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>

        <div class="nav">
            <p class="nva_1" 
            v-for="(v,i) in list1" 
            :key="i"
            :class="current==i?'act tade':''" @click="currentChange(i)">{{v}}</p>
        </div>
       
        <div class="navs">
            <transition-group name="sd" mode="out-in">
            <p class="navs_1" 
            v-show="current==i"
            v-for="(v,i) in list2"
            :key="i">{{v}}</p>
            </transition-group>
        </div>
       
    </div>

    <script>
        const vm = new Vue({
            data:{
                title:"选项卡",
                list1:["情感小说","悬疑小说","修仙小说"],
                list2:["情感小说-100","悬疑小说-200","修仙小说-300"],
                current:0,
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title
            },
            methods:{
                currentChange(e){
                    this.current = e
                }
            },
        }).$mount("#app")
    </script>
</body>
</html>